{% autoescape off %}

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>配置管理系统</title>
   <link href="/static/css/bootstrap.min.css" rel="stylesheet" /> 
   <script src="/static/js/jquery.min.js"></script> 
   <script src="/static/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="/static/css/datepicker/css/reset.css" type="text/css">
    <link rel="stylesheet" href="/static/css/datepicker/css/default.css" type="text/css">
    <link rel="stylesheet" href="/static/css/datepicker/css/style.css" type="text/css">
    <script type="text/javascript" src="/static/css/datepicker/javascript/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="/static/css/datepicker/javascript/zebra_datepicker.js"></script>
    <script type="text/javascript" src="/static/css/datepicker/javascript/core.js"></script>
   
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <th scope="col">
	<form action="/bi_envi_prob/" method="get">
            <input id="datepicker-example11" type="text" name="query" value=""/>
            <input type="submit" value="按时间搜索">
    </form>

    </tr>
    </table>    
    <div class="row"> 
	    <div class="span8">
	    	<div id="main" style="height:600px;width:850px"></div>
		</div> 
		<div class="span5" style="float:right;">
		
			<table class="table">
			   
			   <thead>
			      <tr>
			         <th colspan="2"  style="text-align:center;">环境事件月度环比</th>
			        
			      </tr>
			      <tr>
			         <th>系统名称</th>
			         <th>月度环比</th>
			      </tr>
			   </thead>
			   <tbody>
			      {{down_rate_out_str}}
			   </tbody>
			</table>
			
			<table class="table">
			   
			   <thead>
			      <tr>
			         <th colspan="4" style="text-align:center;">问题类型月度环比</th>
			        
			      </tr>
			      <tr>
			         <th>问题类型</th>
			         <th>{{last_month}}</th>
			         <th>{{now_month}}</th>
			         <th>月度环比</th>
			      </tr>
			   </thead>
			   <tbody>
			      {{type_down_rate_out_str}}
			   </tbody>
			</table>			
			
		</div> 
	</div> 
	<div id="insert_table">

	</div>		
    <!--div id="main" style="height:600px"></div-->
    <!-- ECharts单文件引入 -->
    <script src="/static/js/echarts.js"></script>
    <script type="text/javascript">
	var table_info = {{sys_problem_info}}
        // 路径配置
        require.config({
            paths: {
                echarts: '/static/js/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用力导向布局图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
		
        
        var option = {
        
    title : {
        text: '{{month_tag}}环境事件系统分布',
        
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:[
			{% for sys_name in sys_name_list %}
				'{{ sys_name }}',
			{% endfor %} 
		],  
    },
    toolbox: {
        show : true,
        feature : {
           
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'环境事件系统分布',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            itemStyle : {
                normal : {
                    label : {
                        show : true,
                         formatter : "{b}\n{c}",
                    },
                    
               },
            },
            data:[
                {{systemname_count_this_str}}
            ]
        }
    ]
};



var ecConfig = require('echarts/config');
function eConsole(param) {
	var nodeName = param.name;
	$("#insert_table").html(table_info[nodeName])
}		

		
		
		
		myChart.setOption(option);
		myChart.on(ecConfig.EVENT.CLICK, eConsole);
		myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
		//myChart.on(ecConfig.EVENT.HOVER, eConsole);
		//myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
		//myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
		//myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
		//myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
		
		}
		);
		
	
	
	
    </script>
    <div style = "margin: 0; font-size: 11px; text-align: right; color: #487858;">
		<a href="/upload_file/">| 文件上传</a> |
		<a href="/system_detail/">系统详情页</a> |
		<a href="/version_detail/">版本详情页</a> |
		<a href="/wiki_index/">系统百科页</a> |
		<a href="/dataex_detail/">交互信息展示页</a> |
		<a href="/cm_baseline/">基线展示页</a> |
		<a href="/cm_bi_index/">报表展示页</a> |
		<a href="/test_report_index/">测试周报页</a> |
	</div>
</body>
{% endautoescape %}